<template>
  <div class="communication-form" style="width: 800px;">
    <!--S表单-->
    <el-form
      ref="settingForm"
      class="setting-form"
      :rules="formDataRules"
      :model="formData"
      label-position="left"
      label-width="140px"
    >
      <el-form-item label="URL(服务器地址)">
        {{ setting.communication_url }}
        <el-button type="success" class="clip" size="mini" :data-clipboard-text="setting.communication_url">复制</el-button>
      </el-form-item>
      <el-form-item label="Token(令牌)" prop="wechat_token">
        <el-input v-model="formData.wechat_token" placeholder="Token(令牌)长度为3到32个字符">
          <div slot="append" class="copy-button"><el-button type="success" size="mini" class="clip" :data-clipboard-text="formData.wechat_token">复制</el-button></div>
          <div slot="prepend" class="auto-create" @click="createRandomToken">自动生成</div>
        </el-input>
      </el-form-item>
      <el-form-item label="EncodingAESKey" prop="wechat_encoding_key">
        <el-input v-model="formData.wechat_encoding_key" placeholder="EncodingAESKey(消息加解密密钥)长度为43个字符">
          <div slot="append" class="copy-button"><el-button type="success" size="mini" class="clip" :data-clipboard-text="formData.wechat_encoding_key">复制</el-button></div>
          <div slot="prepend" class="auto-create" @click="createRandomKey">自动生成</div>
        </el-input>
      </el-form-item>
      <el-button type="primary" size="small" @click="submit">确认配置</el-button>
    </el-form>
    <!--E表单-->
  </div>
</template>

<script>
import randomstring from 'randomstring'
import Clipboard from 'clipboard'
export default {
  name: 'CommunicationForm',
  props: {
    setting: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      formData: {
        wechat_token: '',
        wechat_encoding_key: ''
      },
      formDataRules: {
        wechat_token: [
          { required: true, message: '请输入Token令牌', trigger: 'blur' },
          { min: 3, max: 32, message: 'Token令牌长度为3到32个字符', trigger: 'blur' }
        ],
        wechat_encoding_key: [
          { required: true, message: '请输入EncodingAESKey消息加解密密钥', trigger: 'blur' },
          { length: 43, message: 'EncodingAESKey消息加解密密钥长度为43个字符', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    setting() {
      const { wechat_token, wechat_encoding_key } = this.setting
      this.formData = {
        wechat_token,
        wechat_encoding_key
      }
    }
  },
  mounted() {
    new Clipboard('.clip')
  },
  methods: {
    createRandomToken() {
      this.formData.wechat_token = randomstring.generate(32)
    },
    createRandomKey() {
      this.formData.wechat_encoding_key = randomstring.generate(43)
    },
    /**
     * 提交
     */
    submit() {
      this.$refs.settingForm.validate((valid) => {
        if (valid) {
          const { wechat_token, wechat_encoding_key } = this.formData
          this.$put('setting/wechat', {
            wechat_token,
            wechat_encoding_key
          })
            .then(() => {
              this.$message.success({
                message: '修改成功',
                type: 'success'
              })
            })
            .catch((error) => {
              this.$handleError(error)
            })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .copy-button{
    cursor: pointer;
    display: block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    user-select: none;
  }
  .auto-create{
    cursor: pointer;
    display: block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    user-select: none;
  }
</style>
